﻿@page "/progress-bar/circular"
@using Syncfusion.Blazor.ProgressBar
@using Syncfusion.Blazor
@inject NavigationManager Navigation

@inherits SampleBaseComponent;
<SampleDescription>
    <p>This sample illustrates a circular progress bar with track color customization, segments and animation.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the circular progress bar. Progress bar is used to visualize the progression of an extended operation. The sample shows the determinate and indeterminate states, buffer and segments of circular progress bar.</p>
</ActionDescription>

<div class="control-section">
    <div class="row" style="margin-top: 4%;">

        <div class="col-lg-3 col-md-3 col-3" align="center">
            <SfProgressBar @ref="ProObj1" Type="ProgressType.Circular" Value="60" Width="160px" Height="160px"
                           Minimum="0" Maximum="100" StartAngle="180" EndAngle="180"
                           Theme="@CurrentTheme">
                <ProgressBarAnimation Enable="true" Duration="2000" Delay="0"></ProgressBarAnimation>
            </SfProgressBar>
            <div class="@LabelClass">Determinate</div>
        </div>

        <div class="col-lg-3 col-md-3 col-3" align="center">
            <SfProgressBar @ref="ProObj2" Type="ProgressType.Circular" Value="30" Width="160px" Height="160px"
                           Minimum="0" Maximum="100" SecondaryProgress="60"
                           Theme="@CurrentTheme">
                <ProgressBarAnimation Enable="true" Duration="2000" Delay="0"></ProgressBarAnimation>
            </SfProgressBar>
            <div class="@LabelClass">Buffer </div>
        </div>

        <div class="col-lg-3 col-md-3 col-3" align="center">
            <SfProgressBar @ref="ProObj3" Type="ProgressType.Circular" Value="100" Width="160px" Height="160px"
                           SegmentCount="4" Minimum="0" Maximum="100"
                           Theme="@CurrentTheme">
                <ProgressBarAnimation Enable="true" Duration="2000" Delay="0"></ProgressBarAnimation>
            </SfProgressBar>
            <div class="@LabelClass">Segment</div>
        </div>

        <div class="col-lg-3 col-md-3 col-3" align="center">
            <SfProgressBar @ref="ProObj4" Type="ProgressType.Circular" Value="20" Width="160px" Height="160px"
                           StartAngle="180" EndAngle="180" CornerRadius="CornerType.Round"
                           IsIndeterminate="true" Minimum="0" Maximum="100"
                           Theme="@CurrentTheme">
                <ProgressBarAnimation Enable="true" Duration="2000" Delay="0"></ProgressBarAnimation>
            </SfProgressBar>
            <div class="@LabelClass">Indeterminate</div>
        </div>
    </div>
    <div class="row" align="center">
        <button id="reLoad" class="e-control e-btn e-lib e-outline e-primary" @onclick="ProgressRefresh">Reload</button>
    </div>
</div>

@code{
    SfProgressBar ProObj1, ProObj2, ProObj3, ProObj4;
    string LabelClass = "";
    public async Task ProgressRefresh()
    {
        await ProObj1.RefreshAsync();
        await ProObj2.RefreshAsync();
        await ProObj3.RefreshAsync();
        await ProObj4.RefreshAsync();
    }

    string CurrentUri;
    Theme CurrentTheme;
    protected override void OnInitialized()
    {
        CurrentUri = Navigation.Uri;
        LabelClass = "progress-text-align";
        if (CurrentUri.IndexOf("material") > -1)
        {
            CurrentTheme = Theme.Material;
        }
        else if (CurrentUri.IndexOf("fabric") > -1)
        {
            CurrentTheme = Theme.Fabric;
        }
        else if (CurrentUri.IndexOf("bootstrap4") > -1)
        {
            CurrentTheme = Theme.Bootstrap4;
        }
        else if (CurrentUri.IndexOf("bootstrap") > -1)
        {
            CurrentTheme = Theme.Bootstrap;
        }
        else if (CurrentUri.IndexOf("highcontrast") > -1)
        {
            CurrentTheme = Theme.HighContrast;
            LabelClass = "progress-text-align-dark";
        }
        else if (CurrentUri.IndexOf("tailwind") > -1)
        {
            CurrentTheme = Theme.Tailwind;
        }
        else
        {
            CurrentTheme = Theme.Bootstrap4;
        }
    }

}
<style>
    #control-container {
        padding: 0px !important;
    }

    .progress-text-align {
        font-family: Roboto-Regular;
        font-size: 14px;
        color: #3D3E3C;
    }

    .progress-text-align-dark {
        font-family: Roboto-Regular;
        font-size: 14px;
        color: white;
    }


    #reLoad {
        border-radius: 4px;
        text-transform: capitalize;
        margin-top: 3%;
    }
</style>